<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>${article.articleTitle} - EasilyJ - 学Java,从遇见对象开始</title>
    <link rel="shortcut icon" href="/resources/assets/img/favicon.png">
    <link rel="stylesheet" href="/resources/assets/css/bootstrap.css">
    <link rel="stylesheet" href="/resources/assets/elegant-font/code/style.css">
    <link rel="stylesheet" href="/resources/assets/css/style.css">
    <link rel="stylesheet" href="/resources/assets/css/media-queries.css">

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?6cea6d2f867edafb9950a313c6de6818";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

    <%-- 增加一个css --%>
    <link rel="stylesheet" href="/resources/editor/css/editormd.css"/>

</head>

<body>

<!-- Top menu -->
<%@include file="common/header.jsp" %>

<div class="services-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 portfolio-filters wow fadeInLeft">
                <a href="/index" class="filter-all">首页</a> /
                <a href="/articleCategoryFirst?articleCategoryId=${articleCategoryFirst.articleCategoryId}"
                   class="filter-web-design">${articleCategoryFirst.articleCategoryTitle}</a> /
                <a href="/articleCategorySecond?articleCategoryId=${articleCategorySecond.articleCategoryId}"
                   class="filter-web-design">${articleCategorySecond.articleCategoryTitle}</a> /
                <a href="javascript:void(0)" onclick="location.reload()"
                   class="filter-web-design  active">${article.articleTitle}</a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-9 contact-form wow fadeInLeft">
                <div class="panel panel-default panel-bottom-clear">
                    <div class="panel-heading">
                        <h3><span aria-hidden="true" class="${article.articleIcon}"></span> ${article.articleTitle}</h3>
                    </div>
                    <div class="panel-body">
                        <div id="content">
                            <textarea>${article.articleContent}</textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 contact-form text-left content-right">
                <div class="panel panel-default panel-bottom-clear">
                    <div class="panel-heading"><h4>文章目录</h4></div>
                    <div class="panel-body" id="articleCatalog">
                        <%-- 文章目录 --%>
                    </div>
                </div>
                <div class="panel panel-default panel-bottom-clear">
                    <div class="panel-heading"><h4>相关文章</h4></div>
                    <ul class="list-group">
                        <c:forEach items="${articleList}" var="article" varStatus="status">
                            <li class="list-group-item"
                                onclick="window.location.href='/articleDetail?articleId=${article.articleId}'"><span
                                    class="badge">${status.index + 1}</span>${article.articleTitle}</li>
                        </c:forEach>
                    </ul>
                </div>
                <shiro:hasAnyRoles name="admin">
                    <div class="panel panel-default panel-bottom-clear">
                        <div class="panel-heading"><h4>管理</h4></div>
                        <ul class="list-group">
                            <li class="list-group-item"
                                onclick="window.location.href='/articleManage/updateArticle?articleId=${article.articleId}'">
                                编辑当前文章
                            </li>
                            <li class="list-group-item" onclick="window.location.href='/articleManage/addArticle'">
                                发表文章
                            </li>
                            <li class="list-group-item" onclick="window.location.href='/articleManage/articleList'">
                                文章管理
                            </li>
                        </ul>
                    </div>
                </shiro:hasAnyRoles>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<%@include file="common/footer.jsp" %>

<!-- Javascript -->
<%@include file="common/scripts.jsp" %>

<!-- Markdown富文本 -->
<script src="/resources/editor/lib/marked.min.js"></script>
<script src="/resources/editor/lib/prettify.min.js"></script>
<script src="/resources/editor/lib/raphael.min.js"></script>
<script src="/resources/editor/lib/underscore.min.js"></script>
<script src="/resources/editor/lib/sequence-diagram.min.js"></script>
<script src="/resources/editor/lib/flowchart.min.js"></script>
<script src="/resources/editor/lib/jquery.flowchart.min.js"></script>
<script src="/resources/editor/editormd.min.js"></script>
<script type="text/javascript">
    $(function () {
        // 页面解析编辑器内容
        editormd.markdownToHTML("content");

        // 移动目录
        var clientWidth = document.body.clientWidth;
        if (clientWidth < 800) {
            $(".articleRight").remove();
            $(".markdown-toc").append($("#articleCatalog"));
        } else {
            $("#articleCatalog").append($(".markdown-toc"));
        }

        /*var navH = $(".content-right").offset().top;
        $(window).scroll(function () {
            var scroH = $(this).scrollTop();
            if (scroH >= navH) {
            $(".content-right").css({"position": "fixed", "top": 0});
            } else if (scroH < navH) {
            $(".content-right").css({"position": "static"});
            }
        })*/
    });
</script>

</body>

</html>